<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .warp{
        width: 500px;
        background: #84ff9d;
        text-align: center;
        margin: 300px auto;
    }
    table{
        width: 100%;
        border-collapse: collapse;
    }
    tr{
        height: 30px;
        border-bottom: 1px solid tomato;
    }
</style>
<body>
<div class="warp">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="cbAll">
                </th>
                <th>
                    商品
                </th>
                <th>
                    价钱
                </th>
            </tr>
        </thead>
        <tbody id="tabs">
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    奥迪Q7
                </td>
                <td>
                    68W
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    路虎揽胜
                </td>
                <td>
                    122W
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    玛莎拉蒂总裁
                </td>
                <td>
                    140W
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    var cbAll = document.getElementById('cbAll');
    var tabs = document.getElementById('tabs').querySelectorAll('input');
    cbAll.onclick = function () {
        for (var i = 0;i < tabs.length;i++){
            tabs[i].checked = this.checked;
        }
    };
    for (var i = 0;i < tabs.length;i++){
        tabs[i].onclick = function () {
            var flag = true;
            for (var i = 0;i < tabs.length;i++){
                if (!tabs[i].checked) {
                    flag = false;
                    break;
                }
            }
            cbAll.checked = flag;
        }
    }
</script>
</body>
</html>